<template>
    <!-- 盖章签字 - 渲染组件 -->
    <el-image v-show="imgSrc" class="render-image"
        :style="{
            'width': `${element.options.width}mm`,
            'height': `${element.options.height}mm`,
            'top': `${element.options.y}px`,
            'left': `${element.options.x}px`
        }"
        :src="imgSrc"
        :fit="element.options.fit"
        :alt="element.options.alt">
    </el-image>
</template>

<script>
import seal from "../../../../../../images/seal.png";
import sign from "../../../../../../images/sign.png"
export default {
    name: "RenderImage",
    props: {
        Api: {
            type: Object
        },
        element: {
            type: Object
        }
    },
    data() {
        return {
            imgSrc: seal
        }
    },
    mounted() {
        this.$nextTick(() => {
            let src = this.element.options.src && this.element.options.src.split(',');
            if (src && src.length > 0) { // 已经绑定SRC
                let srcs = [];
                src.forEach((item) => {
                    let field = item.split(':');
                    let data = this.Api.options[Number(field[0])]?.data || null;
                    if (Array.isArray(data)) { // 数组，择为多页面渲染数据
                        srcs.push(data?.[this.apiIndex][field[1]] || '');
                    } else if (data) {
                        srcs.push(data?.[field[1]] || '');
                    }
                })
                this.imgSrc = srcs.find(item => item && item.length > 0) || "";
            } else {
                if (this.element.options.type == 'seal') this.imgSrc = seal;
                else if (this.element.options.type == 'sign') this.imgSrc = sign;
            }
        })
    }
}
</script>